<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:m="http://jdevelopment.nl">

<h:head>
	<title>User list</title>
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/websockets.js"></script>
	<script src="js/directUpdate.js?"></script>
	<link href="css/bootstrap.css" rel="stylesheet" />
</h:head>

<h:body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a href="#" class="brand">Websocket proof-of-concept</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#" id="connectionstate">Disconnected</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div style="clear: both; padding-top: 50px;"></div>
	#{webSocketData.init()}
	

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">

				<div id="form" class="well">
					<h1>Enter user data:</h1>
					<table>
						<tr>
							<td>ID:</td>
							<td><span data-form-field="id"></span></td>
						</tr>
						<tr>
							<td>First name:</td>
							<td><input data-form-field="firstName" type="text" /></td>
						</tr>
						<tr>
							<td>Last name:</td>
							<td><input data-form-field="lastName" type="text" /></td>
						</tr>
						<tr>
							<td>Email:</td>
							<td><input data-form-field="email" type="text" /></td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input data-form-button="submit" type="button" value="Add" />
								<input data-form-button="clear" type="button" value="Clear" />
							</td>
						</tr>
					</table>
				</div>

				<div class="well">
					<h1>Users:</h1>
					<table id="directUpdate" class="table table-striped table-bordered">
						<thead>
							<tr>
								<th>ID</th>
								<th>First name</th>
								<th>Last name</th>
								<th>Email</th>
								<th>Edit</th>
								<th>Delete</th>
							</tr>
						</thead>

						<m:directUpdateRepeat var="user" rowIdVar="rowId"
							value="#{index.users}" id="testTable" idField="id"
							formFields="id firstName lastName email"
							websocketUri="ws://localhost:8080/POC-Websockets/websockets"
							longpollUri="http://localhost:8080/POC-Websockets/comet"
							elementType="tbody">
							<tr data-index="#{rowId}">

								<td>(<span data-field="id">#{user.id}</span>)</td>
								<td data-field="firstName">#{user.firstName}</td>
								<td data-field="lastName">#{user.lastName}</td>
								<td>
									<a href="mailto:#{user.email}"><span data-field="email">#{user.email}</span></a>
								</td>

								<td>
									[<a href="javascript:directUpdate.editRow(#{user.id})">Edit user</a>]
								</td>
								<td>
									[<a href="javascript:directUpdate.deleteRow(#{user.id})">Delete user</a>]
								</td>
							</tr>
						</m:directUpdateRepeat>
					</table>

				</div>
			</div>
		</div>
	</div>
</h:body>
</html>